<template>
  <CURDDialog
    :create-title="t('aiot.serviceOrder.selectHeplUsers')"
    :show-options="showOptions"
    :model="model"
    :model-form-setting="modelFormSetting"
    :model-rules="modelRules"
    :curd="curd"
    :hide-next-add-btn="true"
    @before-ok="beforeOk"
    @ok="$emit('ok', model.helperUserName)"
    @cancel="handleCancel"
  />
  <SelectUserModal
    v-model:visible="chooseUserVisible"
    v-model:projectId="projectId"
    v-model:selectedUserIds="selectedUserIds"
    select-mode="checkbox"
    search-place-holder="协同人"
    title="选择协同人"
    @ok="handleSelectedUser"
  />
</template>
<script setup lang="ts">
import { ref, watch, h, nextTick } from "vue";
import { Api } from "/@/api/aiot/serviceWorkOrder";
import { CURDAction, CURDModalEvent, FormItemData, ShowCURDModalOptions } from "../../CURDDialog/models";
import { useI18n } from "/@/locales/useI18n";
import { WorkOrdersOperations } from "/@/types/components";
import { useCURD } from "/@/hooks/useCURD";
import SelectInput from "/@/components/common/SelectInput.vue";
import { UpdateWorkOrderItem } from "/@/api/aiot/serviceWorkOrder/models";
const { t } = useI18n();
const props = defineProps<{
  options?: WorkOrdersOperations;
  helperUserIdsValue: Array<string> | undefined;
}>();
const emits = defineEmits(["ok", "update:helperUserIdsValue"]);
const model = ref<UpdateWorkOrderItem>({
  helperUserIds: [],
  helperUserName: "",
  workOrderId: "",
});
watch(
  () => props.options,
  (v) => {
    if (!v) return;
    projectId.value = props.options?.projectId || "";
    showOptions.value = { action: CURDAction.CREATE };
  }
);
watch(
  () => props.helperUserIdsValue,
  (val) => {
    nextTick(() => {
      model.value.helperUserIds = JSON.parse(JSON.stringify(props.helperUserIdsValue));
    });
  }
);
const showOptions = ref<ShowCURDModalOptions>();
const chooseUserVisible = ref<boolean>(false);
const projectId = ref<string>("");
const selectedUserIds = ref<Array<string>>([]);

const { curd } = useCURD({
  createUrl: Api.updateWorkOrdersOperations,
});

const modelRules = [];
const modelFormSetting: FormItemData<UpdateWorkOrderItem>[] = [
  {
    label: t("aiot.serviceApply.helperUser"),
    key: "helperUserName",
    // type: FormItemComponentType.TEXTAREA,
    customComponent: h(SelectInput, {
      onClick() {
        selectedUserIds.value = model.value.helperUserIds || JSON.parse(JSON.stringify(props.helperUserIdsValue));
        chooseUserVisible.value = true;
      },
    }),
  },
  {
    key: "helperUserIds",
    hide: true,
  },
  {
    key: "workOrderId",
    hide: true,
  },
];
function handleSelectedUser({ userIds, selectedUsers }) {
  model.value.helperUserIds = userIds;
  let helpUserArr = selectedUsers.map((item) => {
    return item.userName + (item.companyPhone ? "(" + item.companyPhone + ")" : "");
  });
  model.value.helperUserName = helpUserArr.join("，");
}
function beforeOk(e: CURDModalEvent) {
  if (e.model) {
    Object.assign(e.model, props.options);
  }
}
function handleCancel() {
  emits("update:helperUserIdsValue", []);
  // model.value.helperUserIds = [];
}
</script>
